<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蜗牛图书商城</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>

	<!-- 商品展示 -->
	<div class="col-md-10 col-md-push-1">
		<div class="col-md-12 bg-danger text-left" style="margin-bottom: 10px">
			<div class="col-md-6 text-left">
				<h3>${loginUser.uname}的购物车</h3>
			</div>
			<div class="col-md-6 text-right">
				<button class="btn btn-lg btn-primary" onclick="goBack()"
					style="height: 56px">继续购物</button>
			</div>
		</div>
		<div style="height: 630px;">
			<div class="col-md-12 bg-warning text-center" id="cartView">
				<div class="col-md-12 text-center panel" id="view"
					style="margin-top: 10px">
					<!-- 展示操作路径 -->
					<div class="panel-heading text-left">
						<a href="index.jsp">商城首页</a>-><a href="javascript:void(0)">购物车管理</a>
					</div>
					<!-- 面板主体 -->
					<div class="panel-body">
						<!-- 表格 -->
						<table class="table table-bordered table-hover table-striped">
							<!-- 表头 -->
							<thead>
								<tr>
									<th class="text-center" style="vertical-align: middle"><input
										type="checkbox" id="allSelect" onclick="selectAll()"><label
										for="allSelect">全选</label></th>
									<th class="text-center" style="vertical-align: middle">序号</th>
									<th class="text-center" style="vertical-align: middle">商品名称</th>
									<th class="text-center" style="vertical-align: middle">商品价格</th>
									<th class="text-center" style="vertical-align: middle">商品数量</th>
									<th class="text-center" style="vertical-align: middle">商品图片</th>
									<th class="text-center" style="vertical-align: middle">操作</th>
								</tr>
							</thead>
							<!-- 表格主体 -->
							<tbody id="cartTB">

							</tbody>
							<tfoot id="cartTF">
								<tr>
									<th colspan="7" style="vertical-align: middle">所选商品总价为：<font
										id="totalPrice" size="6" color="red">&nbsp;</font>元(仅供参考，实际价格请以支付订单为准。)
									</th>
								</tr>
							</tfoot>
						</table>
					</div>
					<!-- 新增按钮 -->
					<div class="panel-footer" style="height: 50px">
						<div class="col-md-6">
							<button class="btn btn-block btn-warning" onclick="deleteAll()">删除所选商品</button>
						</div>
						<div class="col-md-6">
							<button class="btn btn-block btn-info" onclick="orderFromCart()">提交订单</button>
						</div>
					</div>
				</div>

			</div>
			<div class="col-md-12 bg-success text-center" id="pageNav"></div>
			<div class='col-md-12 bg-warning' style="height: 50px;"></div>
		</div>
	</div>
	<!-- 版权页 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/html" id="cartTable">
{{each orderInfos orderInfo}}
	<tr>
		<td style="vertical-align:middle">
			<input type="checkbox" class="cb" data="{{orderInfo.oiid}}">
		</td>
		<td style="vertical-align:middle">{{$index+1}}</td>
		<td style="vertical-align:middle"><a href="goods?opr=initGoodsInfo&gid={{orderInfo.gid}}">{{orderInfo.gname}}</a></td>
		<td style="vertical-align:middle">￥<span id="gprice_{{orderInfo.oiid}}">{{orderInfo.gprice}}</span></td>
		<td style="vertical-align:middle;width:140px" >
			<div class="input-group col-md-12">
				<span class="input-group-btn subBtn">
					<button class="btn btn-default" type="button">-</button>
				</span>
				<input type="text" class="form-control numInput" value="{{orderInfo.oinum}}" data="{{orderInfo.oiid}}" gstock="{{orderInfo.gstock}}">
				<span class="input-group-btn addBtn">
					<button class="btn btn-default" type="button">+</button>
				</span>
			</div>
		</td>
		<td style="vertical-align:middle">
			<a href="goods?opr=initGoodsInfo&gid={{orderInfo.gid}}">
				<img src="{{orderInfo.gpic}}" style='height:60px' />
			</a>
		</td>
		<td style="vertical-align:middle">
			<button type="button" class="btn btn-sm btn-warning" onclick="del(['{{orderInfo.oiid}}'])">删除</button>
			<button type="button" class="btn btn-sm btn-info" onclick="">购买</button>
		</td>
	</tr>	
{{/each}}
</script>
<script type="text/javascript">
	$(document).ready(function() {
		totalPrice();
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.href = "index.jsp";
			return;
		} else {
			//读取购物车信息
			$.ajax({
				url : "orderInfo",
				type : "post",
				data : {
					"opr" : "findAllCart",
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						//生成表格
						let cartHtml = template("cartTable", {
							orderInfos : result.list
						});
						$("#cartTB").html(cartHtml);
					} else if (result.msg == "null") {
						alert("请登录商城用户账号！");
						location.href = "index.jsp";
					} else {
						alert(result.msg);
						location.href = "index.jsp";
					}
					//加载事件
					$(".cb").change(check);
					$(".subBtn").click(function(e) {
						let oiid = $(this).next().attr("data");
						let oinum = $(this).next().val() - 1;
						oinum = oinum == 0 ? 1 : oinum;
						changeOium(oiid, oinum);
					});
					$(".addBtn").click(function(e) {
						let oiid = $(this).prev().attr("data");
						let gstock = parseInt($(this).prev().attr("gstock"));
						let oinum = parseInt($(this).prev().val()) + 1;
						oinum = oinum > gstock ? gstock : oinum;
						oinum = oinum == 1000 ? 999 : oinum;
						changeOium(oiid, oinum);
					});
					$(".numInput").change(function(e) {
						let oiid = $(this).attr("data");
						let gstock = parseInt($(this).attr("gstock"));
						let oinum = parseInt($(this).val());
						oinum = oinum > gstock ? gstock : oinum;
						oinum = oinum > 999 ? 999 : oinum;
						oinum = oinum < 1 ? 1 : oinum;
						changeOium(oiid, oinum);
					});
					$("#allSelect").prop("indeterminate", false);
					$("#allSelect").prop("checked", true);
					selectAll();
				}
			})
		}
	})

	//继续购物
	function goBack() {
		history.go(-1);
	}

	//修改商品数量
	function changeOium(oiid, oinum) {
		//正则表达式：1~999
		let zz = /^[1-9]\d{0,2}$/;
		if (zz.test(oinum)) {
			//修改商品数量			
			$.ajax({
				url : "orderInfo",
				type : "post",
				data : {
					"opr" : "changeOium",
					"oiid" : oiid,
					"oinum" : oinum
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						let oinum = result.orderInfo.oinum;
						$(".numInput[data='" + oiid + "']").val(oinum);
						totalPrice();
					} else if (result.msg == "null") {
						location.reload();
					} else if (result.msg == "outnum") {
						alert("商品数量已经达到库存上限！");
						let oinum = result.orderInfo.oinum;
						$(".numInput[data='" + oiid + "']").val(oinum);
						totalPrice();
					} else {
						alert(result.msg);
					}
				}
			})
		} else {
			alert("商品数量必须是1~999之间的整数，且不能超过商品库存！");
			location.reload();
		}
	}

	//全选全不选
	function selectAll() {
		$("#allSelect").prop("indeterminate", false);
		let flag = $("#allSelect").prop("checked");
		$(".cb").prop("checked", flag);
		totalPrice();
	}

	//当选择表内元素时，实时改变表头CheckBox的状态
	function check() {
		if ($(".cb:checked").length == '0') {
			$("#allSelect").prop("indeterminate", false);
			$("#allSelect").prop("checked", false);
		} else if ($(".cb:checked").length == $(".cb").length) {
			$("#allSelect").prop("indeterminate", false);
			$("#allSelect").prop("checked", true);
		} else {
			$("#allSelect").prop("indeterminate", true);
		}
		totalPrice();
	}

	function totalPrice() {
		let sum = 0;
		let oiids = getOiids();
		for (var i = 0; i < oiids.length; i++) {
			let oinum = $(".numInput[data='" + oiids[i] + "']").val();
			let oiprice = $("#gprice_" + oiids[i]).text();
			sum += oinum * oiprice;
		}
		sum = Math.round(sum * 100) / 100;
		$("#totalPrice").text(sum);
	}

	//获得所选购物车明细的id
	function getOiids() {
		let oiids = new Array();
		$(".cb:checked").each(function(index, obj) {
			oiids[index] = ($(obj).attr("data"));
		})
		return oiids;
	}

	function deleteAll() {
		let oiids = getOiids();
		del(oiids);
	}

	function del(oiids) {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.href = "index.jsp";
			return;
		} else {
			if (!confirm("删除操作不可恢复，您确认要删除吗？")) {
				return;
			}
			//删除oiids数组中所有oiid所对应的订单明细
			$.ajax({
				url : "orderInfo",
				type : "post",
				data : {
					"opr" : "delAll",
					"oiids" : oiids
				},
				dataType : "JSON",
				success : function(result) {
					if (result.msg == "ok") {
						alert("删除成功！");
						location.reload();
					} else if (result.msg == "null") {
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//将购物车中所选的商品作为订单提交
	function orderFromCart() {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.reload();
			return;
		}
		let oiids = getOiids();
		$.ajax({
			url : "orderForm",
			type : "post",
			data : {
				"opr" : "orderFromCart",
				"oiids" : oiids
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					location.href = "creatOrderForm.jsp";
				} else if (result.msg == "null") {
					alert("请登录商城用户账号！");
					location.reload();
				} else {
					alert(result.msg);
					location.reload();
				}
			}
		})
	}
</script>
</html>